<template>
    <el-row :gutter="20">
        <el-col :span="16">
            <el-card>
                <div slot="header">
                    <el-button icon="el-icon-plus" @click="addBusinessDetails()" size="mini">新增业务详情</el-button>
                </div>
                <el-table @sort-change = "sortChange" :data="businessDetailsList" v-loading="isLoading" element-loading-text="列表加载中..." style="width: 100%" max-height="680" border fit highlight-current-row>
                    <el-table-column align="center" width="120px" prop="businessId" label="业务ID" sortable='custom'></el-table-column>
                    <el-table-column align="left" prop="busName" label="业务中文名" sortable='custom'></el-table-column>
                    <el-table-column align="left" prop="busNameEn" label="业务英文名" sortable='custom'></el-table-column>
                    <el-table-column align="left" prop="desc" label="附加描述" sortable='custom'></el-table-column>
                    <el-table-column align="center" width="100px" prop="isValid" label="是否有效" sortable='custom'>
                        <template slot-scope="scope">
                            <c-icon v-if="scope.row.isValid == 1" name="check" style="color:#00AE66;"></c-icon>
                            <c-icon v-else name="times" style="color:#e74c3c;"></c-icon>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="150px" prop="creat_time" label="创建时间" sortable='custom'>
                        <template slot-scope="scope">
                            {{formatDate(scope.row.create_time)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="150px" prop="update_time" label="更新时间" sortable='custom'>
                        <template slot-scope="scope">
                            {{formatDate(scope.row.update_time)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width="80px" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" icon="edit" @click="editBusinessDetails(scope.row)" title="编辑">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
        <el-col :span="8">
            <el-card>
                <div slot="header" style="font-weight:bold;font-size:15px;">
                    {{editPageTitle}}
                </div>
                <el-form ref="businessDetailsForm" label-position="left" label-width="120px" >
                    <el-form-item label="业务中文名">
                        <el-input v-model="businessDetails.busName" style="width:300px;" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="业务英文名">
                        <el-input v-model="businessDetails.busNameEn" style="width:300px;" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="附加描述">
                        <el-input type="textarea" v-model="businessDetails.desc" :rows="4" size="mini" style="width:300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="是否有效">
                        <el-switch v-model="businessDetails.isValid" :active-value = "1" :inactive-value = "0"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="submitLoading" :loading="submitLoading" @click="submitForm">保存</el-button>
                        <!--<el-button>取消</el-button>-->
                    </el-form-item>
                </el-form>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
import icon from 'vue-awesome';
import dayjs from 'dayjs';
import lodash from 'lodash';
import { getBusinessDetailsList, saveBusinessDetails } from '../../api/crawl.js';
export default {
components: {
    'c-icon' : icon
},
data() {
    return {
        isLoading : true,
        businessDetailsList : [],
        //编辑分类
        businessDetails : {
            businessId : '',
            busName : '',
            busNameEn : '',
            desc : '',
            isValid : 1
        },
        editPageTitle : '新增业务详情',
        submitLoading : false,
    }
},
created() {
    this.initBusinessDetailsList();
},
watch: {
},
computed: {
},
mounted() {

},
methods: {
    initBusinessDetailsList(){
        this.isLoading = true;
        getBusinessDetailsList().then(data=>{
            console.log('getBusinessDetailsList---------',data);
            this.isLoading = false;
            this.businessDetailsList = data.rows;
        }).catch(e=>{
            console.log(e);
        });
    },
    //新增分类
    addBusinessDetails() {
        this.editPageTitle = '新增业务详情'
        this.businessDetails.businessId = '';
        this.businessDetails.busName = '';
        this.businessDetails.busNameEn = '';
        this.businessDetails.desc = '';
        this.businessDetails.isValid = 1;
    },
    //修改分类
    editBusinessDetails(row) {
        this.editPageTitle = `编辑业务详情 [${row.businessId}--${row.busName}]`;
        this.businessDetails.businessId = row.businessId;
        this.businessDetails.busName = row.busName;
        this.businessDetails.busNameEn = row.busNameEn;
        this.businessDetails.desc = row.desc;
        this.businessDetails.isValid = row.isValid;
    },
    //保存分类
    async submitForm(){
        console.log('businessDetails---', this.businessDetails)
        const postData = Object.assign({}, this.businessDetails);
        this.submitLoading = true;
        const res = await saveBusinessDetails(postData);
        console.log('saveBusinessDetails---', res)
        if(res){
            //提示保存成功
            this.$alert('保存成功！', '提示', {
                confirmButtonText: '确定'
            });
            this.initBusinessDetailsList();
        }
        this.submitLoading = false;
    },
    formatDate(dateTime){
        if(!dateTime){
            return '--';
        }
        return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
    },
    //排序
    sortChange(data){
        let {order, prop} = data;
        //如果是顺序则按照顺序排，否则就按照倒序排
        if(order === 'descending'){
            this.businessDetailsList = lodash.orderBy(this.businessDetailsList, [prop], 'desc');
        }else{
            this.businessDetailsList = lodash.orderBy(this.businessDetailsList, [prop], 'asc');
        }
        this.pageNo = 1;
    },
}
};
</script>
<style>

</style>



